import { Component, OnChanges, Input } from '@angular/core';
import { EChartOption } from 'echarts';
import { TranslateService } from '@ngx-translate/core';

@Component({
    selector: 'itmp-road-congestion-ratio',
    templateUrl: './road-congestion-ratio.component.html',
    styleUrls: ['./road-congestion-ratio.component.css']
})
export class RoadCongestionRatioComponent implements OnChanges {
    options: EChartOption;
    @Input() data: any;
    @Input() titletext: String;

    constructor(private translate: TranslateService) {}

    ngOnChanges() {
        if (!this.data) {
            return;
        }
        this.options = {
            backgroundColor: '#363a70', //背景色
            legend: {
                textStyle: {
                    color: '#ffffff' //图例颜色
                },
                right: 20,
                top: 0
            },
            tooltip: {
                formatter: (p: any) => `${p.name}-${p.seriesName}: ${p.value[p.encode.y[0]]}%`
            },
            dataset: {
                source: this.data
            },
            xAxis: {
                type: 'category',
                axisLabel: {
                    show: true,
                    textStyle: {
                        //x轴座标文字颜色
                        color: '#fff'
                    }
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#fff', //左边线的颜色
                        width: '1' //坐标线的宽度
                    }
                }
            },
            yAxis: {
                axisLabel: {
                    formatter: '{value}%',
                    textStyle: {
                        //轴座标文字颜色
                        color: '#fff'
                    }
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#fff', //左边线的颜色
                        width: '1' //坐标线的宽度
                    }
                },
                min: 0,
                max: 100
            },
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
        };
    }
}
// (p: any) => `${p.name}-${p.seriesName}: ${p.value[p.encode.y[0]]}%`
